Page({
  data: {
    pen: 3, // 画笔粗细默认值
    color: '#cc0033', // 画笔颜色默认值
    showImage:true,
  },
  startX: 0, // 保存X坐标轴变量
  startY: 0, // 保存Y坐标轴变量
  isClear: false, // 是否启用橡皮擦标记
  context: null, // 用于绘制的上下文对象

  onLoad: function () {
    // 初始化画布上下文
    this.context = wx.createCanvasContext('myCanvas');
      
  },


  // 手指触摸动作开始
  touchStart: function (e) {
    // 得到触摸点的坐标
    this.startX = e.changedTouches[0].x;
    this.startY = e.changedTouches[0].y;

    if (this.isClear) { // 判断是否启用橡皮擦功能
      this.context.setStrokeStyle('#F8F8F8'); // 设置线条样式（与背景颜色一致）
      this.context.setLineCap('round'); // 设置线条端点的样式
      this.context.setLineJoin('round'); // 设置两线相交处的样式
      this.context.setLineWidth(20); // 设置线条宽度
      this.context.save(); // 保存当前坐标轴的缩放、旋转、平移信息
      this.context.beginPath(); // 开始一个路径
      this.context.arc(this.startX, this.startY, 5, 0, 2 * Math.PI, true); // 添加一个圆形路径
      this.context.fill(); // 填充路径
      this.context.restore(); // 恢复之前的坐标轴
    } else {
      this.context.setStrokeStyle(this.data.color);
      this.context.setLineWidth(this.data.pen);
      this.context.setLineCap('round'); // 设置线条端点圆润
      this.context.beginPath();
    }
  },

  // 手指触摸后移动
  touchMove: function (e) {
    var startX1 = e.changedTouches[0].x;
    var startY1 = e.changedTouches[0].y;

    if (this.isClear) {
      this.context.save();
      this.context.moveTo(this.startX, this.startY); // 将路径移动到指定点
      this.context.lineTo(startX1, startY1); // 添加新点，创建线条
      this.context.stroke();
      this.context.restore();
      this.startX = startX1;
      this.startY = startY1;
    } else {
      this.context.moveTo(this.startX, this.startY);
      this.context.lineTo(startX1, startY1);
      this.context.stroke();
      this.startX = startX1;
      this.startY = startY1;
    }

    // 更新画布内容
    this.context.draw(true); // 使用 draw 方法更新画布
  },

  // 启动橡皮擦方法
  clearCanvas: function () {
    this.isClear = !this.isClear;
  },

  penSelect: function (e) { // 更改画笔大小的方法
    this.setData({ pen: parseInt(e.currentTarget.dataset.param) });
    this.isClear = false;
  },

  colorSelect: function (e) { // 更改画笔颜色的方法
    this.setData({ color: e.currentTarget.dataset.param });
    this.isClear = false;
  },

  baocun: function () {
    const that = this;
  
    // 绘制背景图
    wx.getImageInfo({
      src: 'https://7072-project-1gxmyb055bb0207d-1329171303.tcb.qcloud.la/images/3.jpg?sign=d5b68b57bcb0bd6d099827a234982694&t=1731417222',
      success(res) {
  
        // 先绘制背景图
        that.context.drawImage(res.path, 160, 275, 180, 180); // 设置背景图的大小和位置

  
        // 绘制用户的手绘内容
        that.context.setStrokeStyle(that.data.color);
        that.context.setLineWidth(that.data.pen);
        that.context.setLineCap('round'); // 设置笔触样式
  
        // 重新绘制手绘内容
        that.context.draw(true, () => {
          // 保存合成后的图像到相册
          wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            quality: 1,
            success(res) {
              const tempFilePath = res.tempFilePath; // 临时图片路径
              console.log('临时图片路径:', tempFilePath);
  
              // 保存图片到相册
              wx.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success(res) {
                  console.log('图片保存成功', res);
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success'
                  });
                },
                fail(err) {
                  console.error('保存失败', err);
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                  });
                }
              });
            },
            fail(err) {
              console.error('转换失败', err);
              wx.showToast({
                title: '转换失败',
                icon: 'none'
              });
            }
          });
        });
      }
    });
  
    this.setData({
      showImage: false
    });
  },
  

});
